<template>
	<view class="page">
		<uni-swipe-action>
			<uni-swipe-action-item v-if='adminList && adminList.length > 0' :disabled='true' v-for='(item,i) in adminList' :key='i+"-admin"' style='margin-bottom: 20rpx'>
				<navigator url="./consult" hover-class="none" class="itemBox platItem">
					<view class="flex-box alignCenter item">
						<image @error='item.user.avatar = ""' :src="item.user.avatar?item.user.avatar: '/static/head.jpg'" class="Avatar"></image>
						<view class="flex msg">
							<view class="flex-box">
								<text class="title flex lines">{{item.user.nickname}}</text>
								<text class="time" v-if='item.time'>{{item.time}}</text>
							</view>
							<view class="lines info" v-if='item.content.indexOf("img[")>-1'>[图片]</view>
							<!-- <view class="langcon faceBox" v-else-if='item.content.indexOf("face[") > -1'>
								<image :src="imgUrl+'sysimg/face/'+item.content.replace('face[','').replace(']','').trim()+'.gif'"></image>
							</view> -->
							<view class="lines info" v-else>{{item.content}}</view>
						</view>
					</view>
				</navigator>
				<!-- <template v-slot:right>
					<view class="slot-button" @click="del"><text class="slot-button-text">删除</text></view>
				</template> -->
			</uni-swipe-action-item>
			<uni-swipe-action-item v-for='(item,i) in chatList' :key='i' style="border-bottom: 1px solid #F8F8F8;">
				<navigator v-if='item.user' :url="'./consult?id='+item.user.username" hover-class="none"  class="itemBox">
					<view class="flex-box alignCenter item">
						<image @error='item.user.avatar = ""' :src="item.user.avatar?item.user.avatar:'/static/head.jpg'" class="Avatar"></image>
						<view class="flex msg">
							<view class="flex-box alignCenter">
								<text class="title flex lines">{{item.user.nickname}}</text>
								<text class="time">{{item.time}}</text>
							</view>
							<view class="lines info" v-if='item.content.indexOf("img[")>-1'>[图片]</view>
							<!-- <view class="langcon faceBox" v-else-if='item.content.indexOf("face[") > -1'>
								<image :src="imgUrl+'sysimg/face/'+item.content.replace('face[','').replace(']','').trim()+'.gif'"></image>
							</view> -->
							<view class="lines info" v-else>{{item.content}}</view>
						</view>
					</view>
				</navigator>
				<template v-slot:right>
					<view class="slot-button" @click="del(i,item.user.id)"><text class="slot-button-text">删除</text></view>
				</template>
			</uni-swipe-action-item>
		</uni-swipe-action>
		<empty type='1' cat='3' v-if='noData' msg='还没有任何消息哦 ~'></empty>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgUrl: this.imgUrl, 
				chatList:'',
				adminList:'',
				noData: false,
				httpUrl: this.echatUrl,
			}
		},
		methods: {
			del(index,id){
				let that = this;
				uni.request({
					url: that.httpUrl + '/echat/User/manageDelHistory',
					method: 'POST',
					data: {
						shop_id: uni.getStorageSync('store_id'),
						user_id: id
					},
					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					success(res) {
						if(res.data.code == 200){
							that.chatList.splice(index,1);
						}
					}
				})
			}
		},
		onShow() {
			let that = this;
			uni.request({
				url: that.httpUrl + '/echat/User/manageChatHistory',
				method: 'GET',
				data: {
					shop_id: uni.getStorageSync('store_id')
				},
				header: {
					'content-type': 'application/x-www-form-urlencoded'
				},
				success(res) {
					console.log(res)
					if(res.data && res.data.data){
						if(res.data.data.users){
							that.chatList = res.data.data.users
						}
						if(res.data.data.admin){
							that.adminList = res.data.data.admin
						}
					}
					
					if((!that.chatList || that.chatList.length < 1) && (!that.adminList || that.adminList.length < 1)){
						that.noData = true
					}
				}
			})
			// #ifdef H5
			this.$common.H5HideShare()
			// #endif
		}
	}
</script>

<style lang="scss" scoped>
	.border{width: 200%;height: 2rpx;background-color: #eeeeee;opacity: 1;transform: scale(0.5);position: relative;left: -50%;}
	.faceBox image {
		width: 44rpx;
		height: 44rpx;
	}
	.page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #F7F7F7;
		min-height: 100vh;
		height: auto;
		.itemBox{
			width: 100%;
			.border{
				margin-left: 24rpx;
			}
		}
		// .platItem{
		// 	margin-bottom: 20rpx;
		// }
		.item{
			// width: 100%;
			padding: 24rpx 0 24rpx 24rpx;
			background-color: #FFFFFF;
			.msg{
				padding-right: 24rpx;
			}
			.time{
				color: #808080;
				font-size: 22rpx;
			}
			.Avatar{
				width: 88rpx;
				height: 88rpx;
				border-radius: 50%;
				margin-right: 14rpx;
			}
			.title{
				color: #21272D;
				font-size: 28rpx;
				margin-bottom: 10rpx;
				margin-right: 10rpx;
			}
			.info{
				color: #808080;
				font-size: 22rpx;
			}
		}
		.null{
			text-align: center;
			line-height: 100rpx;
			color: #808080;
			font-size: 24rpx;
		}
		
	}
	.example {
		padding: 0 15px;
	}

	.example-info {
		padding: 15px;
		color: #3b4144;
		background-color: #ffffff;
		font-size: 14px;
		line-height: 20px;
	}

	.example-info-text {
		font-size: 14px;
		line-height: 20px;
		color: #3b4144;
	}


	.example-body {
		flex-direction: column;
		padding: 15px;
		background-color: #ffffff;
	}

	.word-btn-white {
		font-size: 18px;
		color: #FFFFFF;
	}

	.word-btn {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		border-radius: 6px;
		height: 48px;
		margin: 15px;
		background-color: #007AFF;
	}

	.word-btn--hover {
		background-color: #4ca2ff;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: center;
		padding: 10px 0;
		background-color: #fff;
	}

	.button {
		border-color: #e5e5e5;
		border-style: solid;
		border-width: 1px;
		padding: 4px 8px;
		border-radius: 4px;
	}

	.button-text {
		font-size: 15px;
	}

	.slot-button {
		/* #ifndef APP-NVUE */
		display: flex;
		height: 100%;
		/* #endif */
		flex: 1;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding: 0 30px;
		background-color: #D32438;
	}

	.slot-button-text {
		color: #ffffff;
		font-size: 14px;
	}
</style>